<template>
	<!-- 首页 分段器2-->
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
			activeColor="#ff557f"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<uni-card>
					<uni-row>
						<uni-col :span="9">
							<image style="height: 240px;width: 200px;"
								src="https://msn-img-nos.yiyouliao.com/inforec-20220627-1361253876237f712437d294be818176.jpg?time=1656396268&signature=ECBE5E54F1CA155E4EDE02A08409E8D6">
							</image>
						</uni-col>
						<uni-col :span="15">
							<p style="font-size: 20px;font-weight: bold;padding: 20px;">
								票房10亿的口碑黑马，会是它吗？
							</p>
							<p style="padding: 10px 0 0 20px;">
								<uni-tag text="热点,精选,新片推荐"></uni-tag>
							</p>
							<uni-row style="padding: 120px 0 0 20px;">
								<uni-col :span="12">
									Mtime时光网
								</uni-col>
								<uni-col :span="12" style="text-align: right;">
									4363人阅读
								</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
			<view v-show="current === 1">
				<uni-card>
					<uni-row>
						<uni-col :span="9">
							<image style="height: 120px;width: 200px;" mode="aspectFit"
								src="https://pic1.zhimg.com/80/v2-34b6318a7e04d25f6068e64bb6b4ff4b_720w.jpg?source=1940ef5c">
							</image>
						</uni-col>
						<uni-col :span="15">
							<p style="font-size: 20px;font-weight: bold;padding: 20px 0 0 20px;">
								暑期档第一匹黑马，就是它了
							</p>
							<p style="padding: 10px 0 0 20px;">
								<uni-tag text="热点,新片推荐"></uni-tag>
							</p>
							<uni-row style="padding: 15px 0 0 20px;">
								<uni-col :span="12">
									犀牛娱乐
								</uni-col>
								<uni-col :span="12" style="text-align: right;">
									5425人阅读
								</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
			<view v-show="current === 2">
			</view>
		</view>
		<uni-card>
			<uni-row>
				<uni-col :span="9">
					<image style="height: 240px;width: 200px;"
						src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W2hVvpnyorfeTfg3tyjE8wHaLH?w=196&h=294&c=7&r=0&o=5&pid=1.7">
					</image>
				</uni-col>
				<uni-col :span="15">
					<p style="font-size: 20px;font-weight: bold;padding: 20px;">
						“喜剧人”坐镇，撑起下半年期待
					</p>
					<p style="padding: 10px 0 0 20px;">
						<uni-tag text="热点,,新片推荐"></uni-tag>
					</p>
					<uni-row style="padding: 120px 0 0 20px;">
						<uni-col :span="12">
							Mtime时光网
						</uni-col>
						<uni-col :span="12" style="text-align: right;">
							7423人阅读
						</uni-col>
					</uni-row>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="9">
					<image style="height: 120px;width: 200px;" mode="aspectFit"
						src="https://msn-img-nos.yiyouliao.com/inforec-20220627-6c054e929ff9b046f08d2a97bc2747f5.jpg?time=1656396268&signature=7C7586B8AC19BEF9A451E2C68FF56520">
					</image>
				</uni-col>
				<uni-col :span="15">
					<p style="font-size: 20px;font-weight: bold;padding: 20px 0 0 20px;">
						直面死亡，才懂得什么叫“好好活着”
					</p>
					<p style="padding: 10px 0 0 20px;">
						<uni-tag text="热点,新片推荐"></uni-tag>
					</p>
					<uni-row style="padding: 15px 0 0 20px;">
						<uni-col :span="12">
							Ifneg电影
						</uni-col>
						<uni-col :span="12" style="text-align: right;">
							1345人阅读
						</uni-col>
					</uni-row>
				</uni-col>
			</uni-row>
		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	const items = ref(['推荐', '资讯', '权益', '活动'])
	const current = ref(0)
	const onClickItem = (e) => {
		current.value = e.currentIndex
	}
</script>

<style scoped>
	.button-round {
		border-radius: 20px;
		color: aliceblue;
		font-size: 16px;
		background-color: #ff007f;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 35%;
		height: 200px;
		line-height: 150px;
		font-size: 36px;
	}
</style>
